<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<title>尾部栏 Footer bar--JQUERY MOBILE 中文API站</title>
<meta name="keywords" content="JQUERY MOBILE 1.0正式版中文手册,Jquery Mobile 1.0,Jquery mobile,移动框架开发手册,darklord,JQUERY MOBILE 1.0正式版,JQUERY API,jqmapi,jqm,jquery," />
<meta name="description" content="Jquery mobile中文API站，Jquery mobile 1.0正式版本中文手册，提供最新版Jquery mobile移动web与应用开发帮助。" />
<link rel="stylesheet" type="text/css" href="../../style/Jqueryapi.css" tppabs="http://www.jqmapi.com/style/Jqueryapi.css" />
<script src="../../style/lib/jquery-1.6.1.min.js" tppabs="http://www.jqmapi.com/style/lib/jquery-1.6.1.min.js"></script>
<script src="style/jqmapi.js" tppabs="http://www.jqmapi.com/componts/toolbar/style/jqmapi.js"></script>
<link rel="shortcut icon" href="../../style/img/favicon.ico" />
</head>
<body>
<div class="nav">
<iframe width="250px" scrolling="no" frameborder="0" allowtransparency="true" src="../../nav.html" tppabs="http://www.jqmapi.com/nav.html" height="1300px"></iframe>
</div>
<div class="main">
<script src="style/jqmapi.js" tppabs="http://www.jqmapi.com/componts/toolbar/style/jqmapi.js" type="text/javascript"></script>
<hr style="color:#595959;" />

<div class="content">
  <h1>尾部栏结构 Footer bar structure</h1>
  <div class="desc">
  <div>尾部栏除了使用的data-role的属性与头部栏不同之外，基本的结构与头部栏是相同的</div>
  </div>
  <div class="code"> 
    <p>&lt;div data-role=&quot;footer&quot;&gt; <br /> 
      　
&lt;h4&gt;Footer content&lt;/h4&gt; <br />
&lt;/div&gt; </p>
</div>
  <div class="desc"><div>尾部工具栏默认下应用的主题样式为"a"(黑色)，但是你可以很轻松的设置主题样式</div></div>
	<p class="indent"><strong>默认的尾部栏 </strong></p>
  <img src="../../images/Footer bar_1.png" tppabs="http://www.jqmapi.com/images/Footer%20bar_1.png">	
<div class="desc"><div>尾部栏的设置与头部栏基本相同。最大的不同是，尾部栏被设定为结构尽量简单，所以Jquery Mobile不会自动给尾部栏生成按钮</div></div>
  <h1>添加按钮 Adding buttons</h1>
<div class="desc"><div>给尾部栏添加任何有效的按钮标记的元素都都会生成按钮。为了节省空间，工具栏里的按钮都是内联按钮，所以按钮的宽度只容纳icon和里面的文字</div></div>
<div class="desc"><div>默认情况下，工具栏内部容纳组件与导航时是不留padding的。如果要给工具栏增加padding,请增加一个ui-bar的class.</div></div>

  <div class="code"> 
    <p>&lt;div data-role=&quot;footer&quot; class=&quot;ui-bar&quot;&gt;<br /> 
      　
&lt;a href=&quot;index.html&quot; data-role=&quot;button&quot; data-icon=&quot;delete&quot;&gt;Remove&lt;/a&gt;<br /> 
　
&lt;a href=&quot;index.html&quot; data-role=&quot;button&quot; data-icon=&quot;plus&quot;&gt;Add&lt;/a&gt;<br /> 
　
&lt;a href=&quot;index.html&quot; data-role=&quot;button&quot; data-icon=&quot;arrow-u&quot;&gt;Up&lt;/a&gt;<br /> 
　
&lt;a href=&quot;index.html&quot; data-role=&quot;button&quot; data-icon=&quot;arrow-d&quot;&gt;Down&lt;/a&gt;<br />
&lt;/div&gt;</p>
</div>
<div class="desc"><div>要想把几个按钮打包成一个按钮组，则需要把这些按钮用一个容器包裹，并给该容器增加data-role="controlgroup"和data-type="horizontal"属性
</div></div>
<div class="code"> 
    <p>&lt;div data-role=&quot;controlgroup&quot; data-type=&quot;horizontal&quot;&gt;</p>
</div>
  <p class="indent"><strong>尾部的成组按钮</strong></p>
  <img src="../../images/Footer bar_2.png" tppabs="http://www.jqmapi.com/images/Footer%20bar_2.png">
  <div class="desc">
    <h1>增加表单元素 Adding form elements</h1>
  <div>表单元素和其他元素也可以添加进工具栏中。这是一个把select添加到尾部栏的实例：</div>
  <img src="../../images/Footer bar_4.png" tppabs="http://www.jqmapi.com/images/Footer%20bar_4.png">
</div>
  <div class="desc">
    <h1>持续的尾部栏 Persistent footers</h1>
  <div>有些情况下你需要一个尾部栏为全局导航元素，希望页面转场时尾部栏也固定并显示。创造一个持续的尾部栏可以做到这一点</div>
  <div>给尾部栏添加data-id属性，并且在所有关联的页面的尾部栏设定同样的data-id的值，就可以使尾部栏在页面转场时也固定并显示，
<strong>例如</strong>给当前页面和目标页面的尾部栏添加id="myfooter" 属性，Jquery Mobile会在页面转场动画的时候保持尾部栏固定 
请注意：这个效果只有在头部栏和尾部栏设定为固定的定位模式（data-position="fixed" ）时在才有用，这样他们在页面转场时才不被隐藏</div>
</div>
</div>
</div>
</div>
<iframe  id="iFrame1" width="160px" scrolling="no" frameborder="0" allowtransparency="true" src="../../adsense_r.html" tppabs="http://www.jqmapi.com/adsense_r.html" onload="this.height=iFrame1.document.body.scrollHeight" ></iframe>
</body>
</html>



